<template>
  <div>
    <!-- 自定义指令：
            全局自定义指令
               Vue.directive('xxx',{
                // 指令的生命周期

                bind:绑定时，类似于beforeMount，读取了指令所在标签内容，但还没有完成渲染
                inserted:渲染后，类似mounted,已完成渲染
                update:更新时，只是代表指令所在组件有更新，但不保证更新完成
                componentUpdated:更新后，类似于updated,所在组件有更新,且更新完成
                unbind:销毁后,类似destroyed,只是代表指令所在标签销毁了

                inserted(dom,obj,vnode){
                  dom:指令所在标签的dom
                  obj:{value:值}
                  vnode:指令所在dom节点信息（虚拟dom信息）
                       {
                        context:指令所在组件的this
                       }
                }
               })
            局部自定义指令
              directives:{
                 xxx:{
                 // 指令生命周期
                 }
              }
            指令的使用
               v-on:keyup.enter="事件"
               v-指令名:属性名.修饰符="值"

          <div v-xxx='值'></div>
     -->
    <h1>{{ ccc }}</h1>
    <div v-color:aaa.bbb="ccc">123</div>
    <button @click="ccc = '#00ff00'">修改ccc</button>
    <!-- 自定义指令解决：如果有src,使用img的src.如果它没有，就使用一张固定图片
    https://fastly.jsdelivr.net/npm/@vant/assets/logo.png
    -->
    <img
      v-img="iconImg"
      class="img"
      src="https://fastly.jsdelivr.net/npm/@vant/assets/logo123.png"
      alt=""
    >
  </div>
</template>
<script>
import iconImg from '@/assets/common/img.jpeg'
export default {
  directives: {
    color: {
      inserted(dom, obj, vnode) {
        // 不能直接使用this,但可以通过vnode拿到组件this
        console.log(vnode.context.num)
        console.log('obj', obj)
        dom.style.color = obj.value
      },
      componentUpdated(dom, obj) {
        dom.style.color = obj.value
      }
    },
    img: {
      inserted(dom, obj) {
        // if (!dom.src) {
        //   dom.src = 'https://fastly.jsdelivr.net/npm/@vant/assets/logo.png'
        // }
        dom.src =
          dom.src ||
          obj.value ||
          'https://fastly.jsdelivr.net/npm/@vant/assets/logo.png'
        // 监听图片加载 出错事件
        dom.addEventListener('error', () => {
          dom.src =
            obj.value || 'https://fastly.jsdelivr.net/npm/@vant/assets/logo.png'
        })
      },
      componentUpdated(dom) {
        // if (!dom.src) {
        //   dom.src = 'https://fastly.jsdelivr.net/npm/@vant/assets/logo.png'
        // }
        dom.src =
          dom.src ||
          obj.value ||
          'https://fastly.jsdelivr.net/npm/@vant/assets/logo.png'
      }
    }
  },

  data() {
    return {
      ccc: '#ff0000',
      num: 999,
      iconImg: iconImg
    }
  }
}
</script>
<style lang="scss" scoped>
.img {
  width: 100px;
  height: 100px;
}
</style>
